<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table表格</title>
    <script src="./js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/index.css"/>
    <!-- 引入组件库 -->
    <script src="./js/index.js"></script>
</head>
<body>
    <div id="app">
        <el-table :data="tableData" stripe>
            <el-table-column prop="date" label="日期"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column label="操作" align="center">
                <!--
                slot-scope：作用域插槽，可以获取表格数据
                scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法
                -->
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑
                    </el-button>
                    <el-button type="danger" size="mini"	@click="handleDelete(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                tableData:[
                    {date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄'},
                    {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'},
                    {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'
                    }
                ]
            },
            methods:{
                handleUpdate:function (response) {
                    alert(JSON.stringify(response.address));
                },
                handleDelete:function (response) {
                    alert(JSON.stringify(response));
                },
            }
        })
    </script>
</body>
</html>